<!DOCTYPE html>
<html lang="zh-cmn-Hans">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>储值卡概览-鹿程智慧油站商户平台</title>
		<meta name="description" content="鹿程科技是提供加油站互联网化零管系统、营销及支付和大数据分析运营服务的行业领先科技公司。鹿程科技充分了解加油站行业的需求和新兴互联网的发展,依靠业内最先进的科技和标准化的运营,持续帮助油站业务发展创造价值。"/>
		<meta name="keywords" content="智慧油站,鹿程,鹿程智慧油站,鹿程智慧油站微信支付,加油站微信支付,加油站营销管理"/>
		<link rel="icon" href="https://static.zhihuiyouzhan.com.cn/static/styles/admin/img/title.ico" type="image/x-icon">
		<link rel="shortcut icon" href="https://static.zhihuiyouzhan.com.cn/static/styles/admin/img/title.ico" type="image/x-icon">
		<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
		<link rel="stylesheet" href="../layui/css/layui.css" />
		<link rel="stylesheet" href="../css/style.css" />
	</head>
<body>
	<section class="section-right">
		<!--deer-tit-->
		<div class="deer-tit">
			<h3>营运车辆</h3>
			<h4>概览</h4>
		</div>
		<!--/deer-tit-->
		<!--deer-content-->
		<div class="deer-content">
			<div class="card-store">
				<div class="card-num buyer-num">
					<dl>
						<dt>车主合计</dt>
						<dd>0</dd>
					</dl>
					<dl>
						<dt>出租车</dt>
						<dd>0</dd>
					</dl>
					<dl>
						<dt>出租车-红的</dt>
						<dd>0</dd>
					</dl>
					<dl>
						<dt>出租车-蓝的</dt>
						<dd>0</dd>
					</dl>
					<dl>
						<dt>教练车</dt>
						<dd>0</dd>
					</dl>
					<dl>
						<dt>优步专车</dt>
						<dd>0</dd>
					</dl>
					<dl>
						<dt>易到用车</dt>
						<dd>0</dd>
					</dl>
					<dl>
						<dt>易成VIP</dt>
						<dd>0</dd>
					</dl>
					<dl>
						<dt>滴滴快车/专车</dt>
						<dd>0</dd>
					</dl>
				</div>
			<div class="gas-border buyer-stores">
				<nav class="gas-nav">
					<dl day="1">今天</dl>
					<dl day="7">最近7天</dl>
					<dl day="30">最近30天</dl>
					<dl><input name="search_time" class="gas-text" type="text" placeholder="查询时间" id="search_time" value="" lay-key="1"></dl>
				</nav>
				<div class="card-num buyer-num buyer-num-top">
					<dl>
						<dt>车主合计</dt>
						<dd>0</dd>
					</dl>
					<dl>
						<dt>出租车</dt>
						<dd>0</dd>
					</dl>
					<dl>
						<dt>出租车-红的</dt>
						<dd>0</dd>
					</dl>
					<dl>
						<dt>出租车-蓝的</dt>
						<dd>0</dd>
					</dl>
					<dl>
						<dt>教练车</dt>
						<dd>0</dd>
					</dl>
					<dl>
						<dt>优步专车</dt>
						<dd>0</dd>
					</dl>
					<dl>
						<dt>易到用车</dt>
						<dd>0</dd>
					</dl>
					<dl>
						<dt>易成VIP</dt>
						<dd>0</dd>
					</dl>
					<dl>
						<dt>滴滴快车/专车</dt>
						<dd>0</dd>
					</dl>
				</div>
				<h4>数据趋势</h4>
				<div class="echarts_box" id="main"></div>
		        <h4>数据详情</h4>
			<table class="layui-table buyer-table-member">
				<thead>
					<tr>
						<th>时间\类型</th>
						<th>出租车</th>
						<th>出租车-红的</th>
						<th>出租车-蓝的</th>
						<th>教练车</th>
						<th>优步专车</th>
						<th>易到用车</th>
						<th>易成VIP</th>
						<th>滴滴快车/专车</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>2018-02-22</td>
						<td>0</td>
						<td>0</td>
						<td>0</td>
						<td>0</td>
						<td>0</td>
						<td>0</td>
						<td>0</td>
						<td>0</td>
					</tr>
					<tr>
						<td>2018-02-22</td>
						<td>0</td>
						<td>0</td>
						<td>0</td>
						<td>0</td>
						<td>0</td>
						<td>0</td>
						<td>0</td>
						<td>0</td>
					</tr>
					<tr>
						<td>2018-02-22</td>
						<td>0</td>
						<td>0</td>
						<td>0</td>
						<td>0</td>
						<td>0</td>
						<td>0</td>
						<td>0</td>
						<td>0</td>
					</tr>
					<tr>
						<td>2018-02-22</td>
						<td>0</td>
						<td>0</td>
						<td>0</td>
						<td>0</td>
						<td>0</td>
						<td>0</td>
						<td>0</td>
						<td>0</td>
					</tr>
					<tr>
						<td>2018-02-22</td>
						<td>0</td>
						<td>0</td>
						<td>0</td>
						<td>0</td>
						<td>0</td>
						<td>0</td>
						<td>0</td>
						<td>0</td>
					</tr>
				</tbody>
			</table>		        
		        
		        
		        
		        
		        
		        
			</div>
		</div>
		<!--/deer-content-->
	</section>
	<!--js-->
		<aside>
			<script type="text/javascript" src="../layui/layui.js" ></script>
			<script type="text/javascript" src="../js/echarts.min.js" ></script>
			<script type="text/javascript">
				layui.use(['laydate','jquery'],function(){
					var $=layui.jquery
					var laydate=layui.laydate;
						laydate.render({
				        elem: '#search_time', //指定元素
				        range: '/',
				    });
				    //gas-nav样式切换
				    $('.gas-nav dl').eq(0).addClass('active').siblings().removeClass('active')
				    $('.gas-nav dl').bind('click',function(){
				    	$(this).addClass('active').siblings().removeClass('active')
				    })
				})
				
		 var myChart = echarts.init(document.getElementById('main'));
	    option = {
	        title: {
	            text: '概览图',
	            left:'2%'
	        },
	        tooltip: {
	            trigger: 'axis'
	        },
	        legend: {
	           data:['出租车','出租车-红的','出租车-蓝的','教练车','优步专车','易到用车','易成VIP','滴滴快车/专车']
	        },
	        grid: {
	            left: '3%',
	            right: '3%',
	            bottom: '3%',
	            containLabel: true
	        },
	        toolbox: {
	            left: '95%',
	            feature: {
	                saveAsImage: {}
	            }
	        },
	        xAxis: {
	            type: 'category',
	            boundaryGap: false,
	            data: ['2018-02-16','2018-02-17','2018-02-18','2018-02-19','2018-02-20','2018-02-21','2018-02-22']
	        },
	        yAxis: {
	            type: 'value'
	        },
	
	        series: [{"name":"\u51fa\u79df\u8f66","data":[0,0,0,0,0,0,0],"type":"line","stack":"total"},{"name":"\u51fa\u79df\u8f66-\u7ea2\u7684","data":[0,0,0,0,0,0,0],"type":"line","stack":"total"},{"name":"\u51fa\u79df\u8f66-\u84dd\u7684","data":[0,0,0,0,0,0,0],"type":"line","stack":"total"},{"name":"\u6559\u7ec3\u8f66","data":[0,0,0,0,0,0,0],"type":"line","stack":"total"},{"name":"\u4f18\u6b65\u4e13\u8f66","data":[0,0,0,0,0,0,0],"type":"line","stack":"total"},{"name":"\u6613\u5230\u7528\u8f66","data":[0,0,0,0,0,0,0],"type":"line","stack":"total"},{"name":"\u6613\u6210VIP","data":[0,0,0,0,0,0,0],"type":"line","stack":"total"},{"name":"\u6ef4\u6ef4\u5feb\u8f66\/\u4e13\u8f66","data":[0,0,0,0,0,0,0],"type":"line","stack":"total"}]    };
	    // 使用刚指定的配置项和数据显示图表。
	    myChart.setOption(option);
				
				
				
				
			</script>
		</aside>
		<!--/js-->
</body>
</html>